<template>
  <a-modal
    :visible="visible"
    :cancelButtonProps="{ style: { display: 'none' } }"
    :afterClose="hanldeAfterClose"
    :width="1120"
    @cancel="handleCancel"
    @ok="handleOk"
    title="项目计划详情"
  >
    <a-spin :spinning="spinning">
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="所属计划"> {{ detailData.JHName }} </a-descriptions-item>
        <a-descriptions-item label="项目名称"> {{ detailData.Name }} </a-descriptions-item>
        <a-descriptions-item label="项目地址"> {{ detailData.Address }} </a-descriptions-item>
        <a-descriptions-item label="状态">
          <span :class="statusColor(detailData.Status)">{{ detailData.Status }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="创建日期" :span="2"> {{ detailData.Name }} </a-descriptions-item>
        <a-descriptions-item label="开发商"> {{ detailData.DLID }} </a-descriptions-item>
        <a-descriptions-item label="勘察单位"> {{ detailData.PPID }} </a-descriptions-item>
        <a-descriptions-item label="设计单位">{{ detailData.DSID }}</a-descriptions-item>
        <a-descriptions-item label="施工单位"> {{ detailData.BDID }} </a-descriptions-item>
        <a-descriptions-item label="监理单位" :span="2"> {{ detailData.SVID }} </a-descriptions-item>
        <a-descriptions-item label="计划开工日期">
          {{ detailData.PlanStartDate | moment('YYYY-MM-DD') }}
        </a-descriptions-item>
        <a-descriptions-item label="实际开工日期">
          {{ detailData.RealityStartDate | moment('YYYY-MM-DD') }}
        </a-descriptions-item>
        <a-descriptions-item label="计划竣工日期">
          {{ detailData.PlanFinishDate | moment('YYYY-MM-DD') }}
        </a-descriptions-item>
        <a-descriptions-item label="实际竣工日期">
          {{ detailData.RealityFinishDate | moment('YYYY-MM-DD') }}
        </a-descriptions-item>
        <a-descriptions-item label="总建筑面积(㎡)"> {{ detailData.GrossArea }}㎡ </a-descriptions-item>
        <a-descriptions-item label="总套数(套)"> {{ detailData.GrossSum }}套 </a-descriptions-item>
        <a-descriptions-item
          label="所需总投资(万元)"
        >{{ detailData.GrossInvest | NumberFormat }}万元</a-descriptions-item
        >
        <a-descriptions-item label="土地面积(㎡)"> {{ detailData.Acreage }}㎡ </a-descriptions-item>
        <a-descriptions-item label="备注">{{ detailData.Descr }}</a-descriptions-item>
      </a-descriptions>
      <file-list
        v-if="visible"
        ref="fileList"
        category="SCTP"
        tableNames="ebll_No001HousProject"
        :fileList="detailData.SCWJJH"
        :option="{
          disabled: true,
        }"
      ></file-list>
    </a-spin>
  </a-modal>
</template>

<script>
import { getProjectDetail } from '@/api/followUpManagement'
import { fileList } from '@/components'
export default {
  components: {
    fileList
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      spinning: false,
      detailData: {}
    }
  },
  methods: {
    statusColor (text = '在建') {
      const colorMap = new Map([
        ['已竣工', 'text-success'],
        ['缓建', 'text-warning'],
        ['在建', 'text-primary']
      ])
      return colorMap.get(text)
    },
    fetchData () {
      this.spinning = true
      getProjectDetail({
        ID: this.data.ID
      })
        .then((res) => {
          this.detailData = res.data
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.detailData = {}
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.close()
    },
    hanldeAfterClose () {}
  }
}
</script>
<style scoped>
</style>
